<template>
    <div class="app-container">

        所属商品店铺：
        <el-select v-model="value" placeholder="所属店铺">
        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name" :value="item.belongingStoreId">
        </el-option>
       </el-select>
        商品条码：<el-input v-model="code" autocomplete="off" placeholder="请输入商品条码" style="width: 15%;"></el-input>
        商品名称：<el-input v-model="code1" autocomplete="off" placeholder="请输入商品名称" style="width: 15%;"></el-input>
        <el-button type="primary" @click="searchEmp()" icon="el-icon-search">搜索</el-button>
        <el-button type="info" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
        <el-button type="danger" @click="deleteBatch()"icon="el-icon-delete" style="float:right;">批量删除</el-button>
        <el-button type="success" @click="addopen()" icon="el-icon-plus" style="float:right;">新建商品列表</el-button>
        <br><br>
        <span style="margin-left:65px ;">价格：</span><el-select v-model="value1" placeholder="价格">
            <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1">
            </el-option>
        </el-select>
        <span style="margin-left:5px ;">上架状态：</span><el-select v-model="value2" placeholder="上架状态">
            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2">
            </el-option>
        </el-select>



        <!-- 页面展示的表单信息 -->
        <el-table :data="unitList" v-loading="listLoading" element-loading-text="Loading" border:true fit
            highlight-current-row stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="goodsListId" label="商品列表ID" width="80">
            </el-table-column>
            <el-table-column prop="belongingStoreId" label="所属商品店铺" width="110">
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" width="110">
            </el-table-column>
            <el-table-column prop="barcode" label="商品条码" width="150">
            </el-table-column>
            <el-table-column prop="leaveStock" label="剩余库存" width="90">
            </el-table-column>
            <el-table-column prop="goodsSortId" label="所属菜品分类" width="110">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="80">
            </el-table-column>
            <el-table-column prop="upStatus" label="上架状态" width="80">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160">
            </el-table-column>
            <el-table-column prop="endTime" label="更新时间" width="160">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning"@click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
<!-- 添加时候的表单弹框 -->
        <el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="所属店铺" :label-width="formLabelWidth">
                    <el-select v-model="form.belongingStoreId" placeholder="请选择所属店铺">
                        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name"
                        :value="item.belongingStoreId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.goodsName" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商品条码" :label-width="formLabelWidth">
                    <el-input v-model="form.barcode" placeholder="随机生成条码内容" readonly></el-input>
                </el-form-item>
            <el-form-item label="剩余库存" :label-width="formLabelWidth">
                <el-input v-model="form.leaveStock" placeholder="请输入剩余库存"></el-input>
            </el-form-item>
            <el-form-item label="所属菜品分类" :label-width="formLabelWidth">
                <el-select v-model="form.goodsSortId" placeholder="请选择菜品分类">
                        <el-option v-for="item in sortNames" :key="item.goodsSortId" :label="item.sortName"
                        :value="item.goodsSortId">
                        </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商品状态" :label-width="formLabelWidth">
                <el-radio-group v-model="form.upStatus">
                    <el-radio label="已上架">已上架</el-radio>
                    <el-radio label="未上架">未上架</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="创建时间" :label-width="formLabelWidth">
                    <el-date-picker v-model="form.createTime" type="datetime"placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
           </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEmp()">确 定</el-button>
            </div>
        </el-dialog>
<!-- 修改时候的表单弹框 -->
        <el-dialog title="修改商品分类信息" :visible.sync="dialogUpdateVisible">
            <el-form :model="form">
                <el-form-item label="所属店铺" :label-width="formLabelWidth">
                    <el-select v-model="form.belongingStoreId" placeholder="请选择所属店铺">
                        <el-option v-for="item in shops" :key="item.belongingStoreId" :label="item.name"
                        :value="item.belongingStoreId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.goodsName" autocomplete="off" placeholder="请输入"></el-input>
                </el-form-item>

                <el-form-item label="商品条码" :label-width="formLabelWidth">
                    <el-input v-model="form.barcode" placeholder="请输入条码内容"></el-input>
                </el-form-item>

            <el-form-item label="剩余库存" :label-width="formLabelWidth">
                <el-input v-model="form.leaveStock" placeholder="请输入剩余库存"></el-input>
            </el-form-item>
            <el-form-item label="所属菜品分类" :label-width="formLabelWidth">
                <el-select v-model="form.goodsSortId" placeholder="请选择菜品分类">
                        <el-option v-for="item in sortNames" :key="item.goodsSortId" :label="item.sortName"
                        :value="item.goodsSortId">
                        </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="form.price" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商品上架状态" :label-width="formLabelWidth">
                <el-radio-group v-model="form.upStatus">
                    <el-radio label="已上架">已上架</el-radio>
                    <el-radio label="未上架">未上架</el-radio>
                </el-radio-group>
            </el-form-item>
           </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateUnit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入api/clue.js中定义接口
import { unitGoodsList, addGoodsList, updateGoodsList, findGoodsListByid, delById, delBatch } from "@/api/goodsList";
import { getShops } from "@/api/shopList";
import { getAllSortNames } from "@/api/goodsType";



export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            unitList: [],
            shops: [],
            sortNames: [],
            listLoading: true,
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            form: {
                goodsListId: '',
                belongingStoreId: '',
                goodsName: '',
                barcode: '',
                leaveStock: '',
                goodsSortId: '',
                price: '',
                upStatus: ''
            },
            formLabelWidth: "120px",
            currentPage: 1,
            total: 0,
            pageSize: 10,
            ids: [],
            options1: [{ value1: '30.00', label1: '30' },
            { value1: '50.00', label1: '50', disabled: true },
            { value1: '90.00', label1: '90' }],
            options2: [{ value2: '已上架', label2: '已上架' },
            { value2: '未上架', label2: '未上架', disabled: true }],
            value: '',
            value1: '',
            value2: '',
            code: '',
            code1: '',
        };
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData(value, code, code1, value1, value2) {
            this.listLoading = true;
            console.log("value,value1", value, value1)
            unitGoodsList({
                pageNum: this.currentPage, pageSize: this.pageSize, belongingStoreId: value,
                goodsName: code1, barcode: code, price: value1, upStatus: value2
            }).then((response) => {
                console.log(response)
                this.unitList = response.data.list;
                this.total = response.data.total
                this.listLoading = false;
            });

        },
        searchEmp() {
            this.fetchData(this.value, this.code, this.code1, this.value1, this.value2);
        },
        //添加市场活动显现弹框并添加数据
        addopen() {
            this.form = {},
                this.dialogFormVisible = true;
                this.generateRandomBarcode();
                
        },
        addEmp() {
            console.log("form********",this.form)
            addGoodsList(this.form).then((response) => {
                if(response.code == 500){
                 this.$message({
                            type: "error",
                            message: response.msg,
                            duration: 1000
                        });
                }
                if (response.code == 200) {
                    this.dialogFormVisible = false;
                    this.$message({
                            type: "success",
                            message: "添加成功!",
                        });
                    this.fetchData();
                }

            });
        },
        //在查询后重置
        resetSearchForm() {
            this.form = "";
            this.currentPage = 1;
            this.value = '';
            this.value1 = '';
            this.code = '';
            this.code1 = '';
            this.value2 = '';
            this.fetchData();
        },
        // 每页显示的记录数发生变化触发的操作
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.fetchData()

        },
        // 当前页发生变化触发的操作
        handleCurrentChange(val) {
            this.currentPage = val
            this.fetchData(this.code, this.value, this.value1,this.code1, this.value2)
        },
        handleSelectionChange(val) {
            this.ids = [];
            for (var i = 0; i < val.length; i++) {
                this.ids.push(val[i].goodsListId)
            }
            console.log(this.ids)
        },
        //修改市场活动弹框显现并修改数据
        handleEdit(index, row) {
            // console.log(index, row);
            findGoodsListByid(row.goodsListId).then((response) => {
                console.log("*************", response.data)
                this.form = response.data;//将查询出来的数据 赋值给表单
                this.form.belongingStoreId = +this.form.belongingStoreId
                this.form.goodsSortId = +this.form.goodsSortId
                this.dialogUpdateVisible = true;
            });
        },
        updateUnit() {
            updateGoodsList(this.form).then((response) => {
                if (response.code == 200) {
                    console.log("form********",this.form)

                    this.dialogUpdateVisible = false;
                    this.$message({
                            type: "success",
                            message: "修改成功!",
                        });
                    this.fetchData();
                }
            });
        },
        //删除数据
        handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    delById(row.goodsListId).then((response) => {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.currentPage = 1,
                            this.fetchData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        //批量删除数据，转化客户
        deleteBatch() {
            if (this.ids.length == 0) {
                alert('请选择至少一条数据');
                return;
            }
            delBatch(this.ids.join(",")).then(response => {
                this.fetchData();
            })
        },
        getShop() {
            getShops().then((response) => {
                console.log("sssssssssssssssss",response)
                this.shops = response.data;
            });
        },
        getAllSortName() {
            getAllSortNames().then((response) => {
                this.sortNames = response.data;
                console.log(response)
            });
        },
        generateRandomBarcode() {
            // 生成一个随机的商品条码，例如：CODE-XXXXXX
             const randomCode = Math.random().toString(36).substr(2, 8).toUpperCase(); // 生成6位随机字符
            //const randomNum = Math.floor(Math.random() * 1000).toString().padStart(3, '0'); // 生成随机数
            // return `CODE-${randomCode}`;  // 采用CODE前缀
            this.form.barcode = `CODE-${randomCode}`;
          },
        },
    // 生命周期钩子函数(vue对象创建完,自动调用该方法)
    created() {
        this.fetchData();
        this.getShop();
        this.getAllSortName();
    }
}
</script>

<style>
#barcode {
  margin-top: 20px;
}
</style>